@item-height: 20px;

.attribute-filter {
  padding: (44px - @item-height) / 2;
  z-index: 999;

  .attribute-filter-item {
    display: inline-block;
    position: relative;
    height: @item-height;
    padding: 0 8px 0 8px;
    line-height: @item-height;
    cursor: pointer;

    .name {
      display: inline-block;
      max-width: 250px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    .icon {
      margin: 3px 0 0 4px;
      vertical-align: top;
    }
    .remove-item {
      margin: 4px 0 0 6px;
      vertical-align: top;
      color: #cccccc;
      font-size: 14px;
      transition: all 0.3s;
      &:hover {
        color: #666666;
      }
    }
    // .clear {
    //   color: #cecece;
    //   font-size: 14px;
    //   opacity: 0;
    //   position: absolute;
    //   right: 8px;
    //   top: 52%;
    //   transform: translateY(-50%);
    //   transition: all 0.5s;
    // }
    // &.valued:hover {
    //   .icon {
    //     opacity: 0;
    //   }
    //   .clear {
    //     opacity: 1;
    //   }
    // }

    // 下拉框样式
    .attribute-filter-item-dropdown {
      position: absolute;
      z-index: 999;
      display: none;
      left: 8px;
      top: @item-height + 4px;
      min-width: 150px;
      overflow: auto;
      background-color: #ffffff;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      border-radius: 4px;
      > * {
        position: static !important;
      }
      &.active {
        display: block;
      }
      &:not(.data-range-filter-type-dropdown) {
        max-width: 250px;
      }
    }

    // 树组件样式
    &.tree-select-filter-type {
      .tree-select {
        display: block;
        width: 100%;
        padding: 12px;

        .ant-select-selection {
          position: relative;
          border: 1px solid #e6eaef !important;
          max-height: 65px;
          overflow-y: auto;
          overflow-x: hidden;
          outline: none;
          box-shadow: none;
        }
      }
      .tree-select + div {
        position: static !important;
      }
      .tree-select-dropdown {
        position: static !important;
        padding: 0 12px;
        max-height: 250px !important;
        overflow: auto;
        box-shadow: none !important;
      }

      // 重写antd树组件样式
      .ant-select-tree {
        margin-top: 0 !important;
      }
      .ant-select-search__field {
        min-width: 6px;
      }
      .ant-select-tree-node-content-wrapper {
        width: calc(100% - 24px) !important;
        padding-left: 0;
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: -8px;
      }
      .ant-select-tree-checkbox {
        margin-left: 1px;
      }
      .ant-select-selection__choice__content {
        max-width: 50px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .ant-select-tree-checkbox-disabled,
      .ant-select-tree-switcher {
        display: none;
        & + .ant-select-tree-node-content-wrapper {
          font-weight: 600;
          color: #1e1f23;
          background-color: inherit !important;
          & + .ant-select-tree-child-tree {
            padding-left: 0;
          }
        }
      }
      .ant-select-tree-treenode-switcher-open:first-child {
        margin-top: 0;
      }
    }

    // 输入框样式
    &.input-filter-type {
      .input-filter-type-dropdown {
        padding: 12px;
        min-width: 200px;
        .confirm {
          display: block;
          margin-top: 6px;
        }
      }
    }

    // 下拉时间筛选样式
    &.data-range-filter-type {
      .ant-calendar-picker {
        width: 250px;
      }

      .ant-calendar-picker {
        display: none;
      }
      .ant-calendar-picker-container,
      .ant-calendar-picker-container {
        position: static !important;
      }
      .range-picker + div {
        position: static !important;
      }
    }
  }

  .extend-filter {
    position: relative;
    margin-top: 6px;
    min-height: @item-height;
    opacity: 1;
    transition: all 0.25s ease;
    &.empty {
      margin-top: 0;
      min-height: 0;
      opacity: 0;
    }
  }
}
